<template>
	<view class="page">

		<view class="avatar">
			<u--image :src="userInfo.src" width="200rpx" height="200rpx" shape="circle"></u--image>
			<view class="name">{{userInfo.name}}</view>

			<u-button @tap="upload" text="解绑账号" class="avatar-btn"></u-button>
		</view>

		<view>订单列表</view>
		<view class="order_list">
			<view class="firsh_item">
				<u-row customStyle="margin-bottom: 10px;">
					<u-col span="4">
						<view>订单号</view>
					</u-col>
					<u-col span="6">
						<view style="text-align: center;">日期</view>
					</u-col>
					<u-col span="2">
						<view style="text-align: center;">操作</view>
					</u-col>
				</u-row>
				<u-line color="#dfe2e5"></u-line>
			</view>

			<view class="item" v-for="item in orderList">
				<u-row customStyle="margin-bottom: 10rpx;margin-top:10rpx">
					<u-col span="4">
						<u--text prefixIcon="car-fill" iconStyle="font-size: 19px" :text="item.order_sn"></u--text>
					</u-col>
					<u-col span="6">
						<u--text iconStyle="font-size: 19px" :text="item.date"></u--text>
					</u-col>
					<u-col span="2">
						<view><button size="mini" class="btn">查看</button></view>
					</u-col>
					
				</u-row>
				<u-line color="#dfe2e5"></u-line>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					src: '',
					name: 'me'
				},
				orderList: [{
					order_sn: '123124142',
					date: '2023-03-04'
				},{
					order_sn: '123124142',
					date: '2023-03-04'
				},{
					order_sn: '123124142',
					date: '2023-03-04'
				}]
			}
		},
		onShow() {
			// 获取当前用户信息
			this.getUserInfo()

		},
		methods: {

			// 获取当前用户信息
			getUserInfo() {
				// UserApi.userInfo().then(res => {
				// 	console.log(res)
				// 	this.model1.userInfo = res.info
				// })
			},




		},
		onReady() {

		},
	}
</script>

<style scoped lang="scss">
	.page {
		margin-top: 50rpx;
		padding: 20rpx;

		.avatar {
			width: 200rpx;
			text-align: center;
			margin: auto;
			.name {
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				font-size: 42rpx;


			}

			.avatar-btn {
				width: 200rpx;
				background-color: #1e4297;
				color: #fff;
			}
		}
		.order_list{
			border-radius: 30rpx;
			background-color: #f5f7fb;
			padding: 10rpx;
			
			.firsh_item{
				text-align: center;
			}
			.btn{
				background-color: #1e4297;
				color: #fff;
			}
		}
	

	}
</style>